<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/layui/css/style.css?v=${.Config.basic.version}" media="all">

    <link rel="stylesheet" href="../layuiadmin/style/admin.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/zTree/css/metroStyle/metroStyle.css?v=${.Config.basic.version}">
    <link rel="stylesheet" href="../plugins/zTree/css/metroStyle/ext.css?v=${.Config.basic.version}">
    <link rel="stylesheet" href="../css/atlantis.css?v=${.Config.basic.version}">
    <link rel="stylesheet" href="../dashboard/css/jquery.liMarquee.css?v=${.Config.basic.version}">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3564966_a6tt4yhnzge.css" media="all">
    
    <style>
        .header-panel {
            display: flex;
            width: 100%;
            height: 4vh;
        }

        /*.toolbar{*/
        /*    align-items: center;*/
        /*    margin-left: auto;*/
        /*    padding-right: 10px;*/
        /*}*/
        /*.toolbar .layui-input, .layui-select, .layui-textarea {*/
        /*    height: 34px;*/
        /*    line-height: 34px;*/
        /*    border-width: 1px;*/
        /*    border-style: solid;*/
        /*    background-color: #0a1434;*/
        /*    color: #8f97b3;*/
        /*    border-radius: 5px;*/
        /*    border: 0px solid #6c7492;*/
        /*    text-align: right;*/
        /*}*/
        .header-panel .layui-input, .layui-select, .layui-textarea {
            height: 34px;
            line-height: 34px;
            border-width: 1px;
            border-style: solid;
            background-color: #0a1434;
            color: #8f97b3;
            border-radius: 5px;
            border: 0px solid #6c7492;
            /*text-align: right;*/
            text-align: center;
            font-size: 18px;
        }

        .header-panel .layui-form-select dl dd {
            cursor: pointer;
            text-align: center;
        }

        .content {
            padding: 2px;
            position: absolute;
            top: 4vh;
            bottom: 0;
            left: 0;
            right: 0;
            right: 0;
            /*display: flex;*/
        }
        .top-content{
            /*display: flex;*/
            width: 100%;
            /*height: 20%;*/
        }
        .bottom-content{
            display: flex;
            width: 100%;
            /*height: 80%;*/
            height: calc(100% - 120px);
        }
        .left-content {
            display: flex;
            width: 25%;
            height: 100%;
        }
        .right-content {
            display: flex;
            width: 75%;
            height: 100%;
        }
        .panel-container {
            display: flex;
            flex: 1 1 0;
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 0px;
            flex-direction: column;
            height: 100%;
            position: relative;
            width: 100%;
        }
        .mode-panel {
            height: 50%;
            border-radius: 10px;
            margin-left: 10px;
        }
        .feed-chart-panel{
            height: 50%;
            margin-left: 10px;
            margin-right: 10px;
        }
        .house-panel{
            height: 50%;
            margin-left: 10px;
            margin-right: 10px;
        }

        .bg-panel{
            background-color: #3c7cff;
            border: 1px solid #ccccdc12;
            border-radius: 3px;
            box-shadow: none;
            box-shadow: 0 0 .18rem rgba(19,158,255,.4) inset;
            position: relative;
            border-radius: 10px;
        }

        .panel-header{
            height: 2rem;
            margin-bottom: 0.1rem;
            position: relative;
        }
        .panel-header{
            height: 2rem;
            margin-bottom: 0.1rem;
            position: relative;
        }
        .panel-title {
            font-size: 1rem;
            color: #8f97b3;
            line-height: 2rem;
            font-weight: bold;
            position: relative;
            z-index: 20;
            margin-left: 1rem;
        }
        .panel-content{
            height: calc(100% - 2rem);
        }


        .house {
            background-color: #0a1434;
            height: 80%;
            overflow: hidden;
            cursor: pointer;
            padding: 10px;
            margin: 10px;
            /*opacity: 0.5;*/
            /*!*height: 100%;*!*/
            /*background: rgb(15, 12, 12,100) url("/img/house.png") no-repeat scroll center center;*/
            /*background-position-x: center;*/
            /*background-position-y: center;*/
            /*background-size: auto;*/
            /*display: block;*/
            /*background-position: 50% 0%;*/
            /*background-size: 40%;*/
        }
        .house:hover{
            background-color: #0e1013;
            background-image: linear-gradient(45deg,#4958b9,#3c7cff) !important;
        }

        .house-content{
            height: 90%;
        }


        .panel-rela {
            position: relative;
            z-index: 20;
            width: 100%;
            height: 100%;
        }
        .p15 {
            padding: 0.15rem;
        }
        .layui-elem-quote {
            margin-bottom: 10px;
            /*margin-top: 10px;*/
            padding: 10px;
            line-height: 5px;
            border-left: 2px solid #00c7d9;
            border-radius: 0 2px 2px 0;
            background-color: transparent;
            color: #eeeeee;
            font-size: 0.9rem;
        }
        .house-img{
            height: 50%;
            overflow: hidden;
            cursor: pointer;
            /*padding: 10px;*/
            /*margin: 10px;*/
            /*opacity: 0.5;*/
            background: url("../img/house.png") no-repeat scroll center center;
            background-position-x: center;
            background-position-y: center;
            background-size: auto;
            background-position-x: center;
            background-position-y: center;
            background-size: auto;
            display: block;
            background-position: 50% 0%;
            background-size: 50%;
            /*top: -20%;*/
            position: relative;
        }
        .drop {
            /*width: 100%;*/
            height: auto;
            /*background: rgba(31,48,102,.6);*/
            position: relative;
            /*padding-left: 10px;*/
            /*padding-right: 10px;*/
            padding: 10px;
            /*top: 35%;*/
            /*left: 0;*/
            /*margin-left: -65px;*/
        }
        .drop .tit {
            font-size: 0.9rem;
            color: #fff;
            text-align: center;
        }
        .drop .box {
            margin-top: 5px;
        }
        .drop p {
            font-size: 0.8rem;
            color: #a3bed9;
            line-height: 1rem;
        }
        .drop p em {
            float: right;
            font-style:normal;
        }
        .drop .ico {
            width: 9px;
            height: 9px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            display: block;
            position: absolute;
        }
        .drop .ico_1 {
            background-image: url("../img/top_left.png");
            top: 0;
            left: 0;
        }
        .drop .ico_2 {
            background-image: url("../img/top_right.png");
            top: 0;
            right: 0;
        }
        .drop .ico_3 {
            background-image: url("../img/bottom_left.png");
            bottom: 0;
            left: 0;
        }
        .drop .ico_4 {
            background-image: url("../img/bottom_right.png");
            bottom: 0;
            right: 0;
        }

        [v-cloak]{
            display: none;
        }
        .panel-under-title {
            height: calc(100% - 20px);
        }

        .gdhead{display: flex; justify-content: space-between; line-height:30px;}
        .gdhead span{width: 100%; text-align: center;font-size: 0.9rem;}

        .smjl li{display: flex; padding: 5px 0;border: 1px solid #182557}
        .smjl li span{ width: 100%; text-align: center; font-size: .7rem; opacity: .8;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

        .tabnav>li{ height:0; overflow: hidden;}

        .full-height{
            height: 100% !important;
        }
    </style>
</head>

<body >


    <div class="header-panel">
        <form class="layui-form" lay-filter="form_select" style="margin-left: 40%;">
            <select  name="farm" lay-filter="farm" lay-verify="required" lay-search="" style="width: 100%;" >
                <option value=""></option>
            </select>
        </form>
    </div>

    <div class="content ">
        <div class="top-content scroll-none">
            <div class="layui-row layui-col-space10 pd-lg sum-info" v-cloak>

                <div class="layui-col-md2">
                    <div class="card card-stats layui-bg-default-gradient card-round">
                        <div class="card-body ">
                            <div class="row">
                                <div class="layui-col-md4">
                                    <div class="icon-big text-center">
                                        <!--<i class="iconfont icon-yangzhichang layui-icon-lg"></i>-->
                                        <i class="iconfont icon-pig layui-icon-lg"></i>
                                    </div>
                                </div>
                                <div class="layui-col-md8 col-stats">
                                    <div class="numbers">
                                        <p class="card-category text-center">猪只个数</p>
                                        <div ><span class="layui-text-lg layui-text-green-light">{{pigNum}}</span> <span class="layui-text-xs layui-text-white">头</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md2">
                    <div class="card card-stats layui-bg-default-gradient card-round">
                        <div class="card-body">
                            <div class="row">
                                <div class="layui-col-md4">
                                    <div class="icon-big text-center">
                                        <i class="iconfont icon-5siliao layui-icon-lg "></i>
                                    </div>
                                </div>
                                <div class="layui-col-md8 col-stats">
                                    <div class="numbers">
                                        <p class="card-category text-center ">今日下料</p>
                                        <div ><span class="layui-text-lg layui-text-green-light">{{todayFeed}} </span> <span class="layui-text-xs layui-text-white"> kg</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md2">
                    <div class="card card-stats layui-bg-default-gradient card-round">
                        <div class="card-body">
                            <div class="row">
                                <div class="layui-col-md4">
                                    <div class="icon-big text-center">
                                        <i class="iconfont icon-shui layui-icon-lg "></i>
                                    </div>
                                </div>
                                <div class="layui-col-md8 col-stats">
                                    <div class="numbers">
                                        <p class="card-category text-center ">今日下水</p>
                                        <div ><span class="layui-text-lg layui-text-green-light">{{todayWater}} </span> <span class="layui-text-xs layui-text-white"> L</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md2">
                    <div class="card card-stats layui-bg-default-gradient card-round">
                        <div class="card-body ">
                            <div class="row">
                                <div class="layui-col-md4">
                                    <div class="icon-big text-center">
                                        <i class="iconfont icon-shebeizhuangtai layui-icon-lg"></i>
                                    </div>
                                </div>
                                <div class="layui-col-md8 col-stats">
                                    <div class="numbers">
                                        <p class="card-category text-center">在线/总设备</p>
                                        <div ><span class="layui-text-lg layui-text-blue" v-bind:class="{'layui-text-green-light': onlineNum==deviceNum,'layui-text-orange': onlineNum!=deviceNum}">{{onlineNum}}/{{deviceNum}}</span> <span class="layui-text-xs layui-text-white"></span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md2">
                    <div class="card card-stats layui-bg-default-gradient card-round">
                        <div class="card-body">
                            <div class="row">
                                <div class="layui-col-md4">
                                    <div class="icon-big text-center">
                                        <i class="iconfont icon-tingyong layui-icon-lg"></i>
                                    </div>
                                </div>
                                <div class="layui-col-md8 col-stats">
                                    <div class="numbers">
                                        <p class="card-category text-center">空栏</p>
                                        <div ><span class="layui-text-lg " v-bind:class="{'layui-text-mute': disableNum==0,'layui-text-orange': disableNum!=0}">{{disableNum}} </span> <span class="layui-text-xs layui-text-white"> 个</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md2">
                    <div class="card card-stats layui-bg-default-gradient card-round">
                        <div class="card-body">
                            <div class="row">
                                <div class="layui-col-md4">
                                    <div class="icon-big text-center">
                                        <i class="layui-icon layui-icon-notice layui-icon-lg"></i>
                                    </div>
                                </div>
                                <div class="layui-col-md8 col-stats">
                                    <div class="numbers">
                                        <p class="card-category text-center">告警设备</p>
                                        <div ><span class="layui-text-lg " v-bind:class="{'layui-text-mute': alarmNum==0,'layui-text-red': alarmNum!=0}">{{alarmNum}} </span> <span class="layui-text-xs layui-text-white"> 个</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>

        </div>
        <div class="bottom-content scroll-none">
            <div class="left-content">
                <div class="panel-container">
                    <div class="mode-panel bg-panel">
                        <div class="panel-header">
                            <span class="panel-title">单台日平均下料下水</span>
                        </div>
                        <div id="chart1" class="panel-under-title">
                        </div>
                    </div>
                    <div class="mode-panel bg-panel" style="margin-top: 10px;">
                        <div class="panel-header">
                            <span class="panel-title">告警信息</span>
                        </div>
                        <div id="alarm_panel" class="panel-under-title">
                            <ul class="tabnav panel-under-title">
                                <li style="height:100%;">
                                    <div class="gdhead">
                                        <span>栏舍</span><span>告警信息 </span><span>发生时间</span>
                                    </div>
                                    <div class="scrollDiv full-height" >

                                        <ul class="smjl">
                                            <!-- <li><span class="">测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span>
                                            </li>
                                            <li><span>测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span>
                                            </li>
                                            <li><span>测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span>
                                            </li>
                                            <li><span>测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span>
                                            </li>
                                            <li><span>测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span>
                                            </li>
                                            <li><span>测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span>
                                            </li>
                                            <li><span>测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span>
                                            </li>
                                            <li><span>测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span>
                                            </li>
                                            <li><span>测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span>
                                            </li>
                                            <li><span>测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span>
                                            </li>
                                            <li><span>测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span>
                                            </li>
                                            <li><span>测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span>
                                            </li>
                                            <li><span>测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span>
                                            </li>
                                            <li><span>测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span>
                                            </li>
                                            <li><span>测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span>
                                            </li>
                                            <li><span>测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span>
                                            </li>
                                            <li><span>测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span>
                                            </li>
                                            <li><span>测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span>
                                            </li> -->
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-content">
                <div class="panel-container">

                    <div class="feed-chart-panel " style="display: flex;flex-direction: row;">
                        <div class="  bg-panel full-height" style="width: 60%;">
                            <div class="panel-header">
                                <span class="panel-title">每日下料下水总量</span>
                            </div>
                            <div id="chart2" class="panel-under-title">
                            </div>
                        </div>
    
                        <div class=" bg-panel full-height" style="width: 40%; margin-left: 10px;">
                            <div class="panel-header">
                                <span class="panel-title">设备模式</span>
                            </div>
                            <div id="chart_mode" class="panel-under-title">
                            </div>
                        </div>
                    </div>
                    

                    <div class="house-panel bg-panel" style="margin-top: 10px;">
                        <div class="panel-header">
                            <span class="panel-title">栏舍</span>
                        </div>
                        <div class="panel-content my_house" v-cloak>
                            <div v-if="list.length==0" class="no_data" style="opacity:0.3;height: 90%; background: url('../img/empty.png') center center no-repeat ;background-position: 50% 10%;background-size: 20%;"></div>
                            <div v-else class="" style="height: 100%;">
                                <template  v-for="(item,index) in list">
                                    <div class="layui-col-md3" style="height: 100%;">
                                        <div class="house" @click="onClickHouse(item)">
                                            <blockquote class="layui-elem-quote">{{item.housename}}
                                                <span v-if="item.alarm_num>0 &&item.alarm_num<=99" class="layui-badge fr">{{item.alarm_num}}</span>
                                                <span v-if="item.alarm_num>99" class="layui-badge fr">99+</span>
                                            </blockquote>
                                            <div class="house-content">
                                                <div class="house-img">

                                                </div>
                                                <div class="drop">
                                                    <!--<h6 class="tit">环控信息</h6>-->
                                                    <div class="box">
                                                        <p>温度 <em v-bind:class="{'layui-text-orange-light': isNaN(item.temp),'layui-text-green-light': !isNaN(item.temp)}">{{item.temp}} ℃</em></p>
                                                        <p>湿度 <em v-bind:class="{'layui-text-orange-light': isNaN(item.humi),'layui-text-green-light': !isNaN(item.humi)}">{{item.humi}} %</em></p>
                                                        <p>今日下料 <em v-bind:class="{'layui-text-orange-light': isNaN(item.total_feed),'layui-text-green-light': !isNaN(item.total_feed)}">{{item.total_feed}} kg</em></p>
                                                    </div>
                                                    <em class="ico ico_1"></em>
                                                    <em class="ico ico_2"></em>
                                                    <em class="ico ico_3"></em>
                                                    <em class="ico ico_4"></em>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>


                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>


    <script src="../plugins/layui/layui.js"></script>
    <script src="../plugins/layui/xm-select-v1.2.4.js"></script>
    <script src="../plugins/jquery/jquery-3.6.0.js?v=${.Config.basic.version}"></script>
    <script src="../plugins/vue/vue.min.js"></script>
    <script src="../plugins/zTree/js/jquery.ztree.core.min.js?v=${.Config.basic.version}"></script>
    <script src="../plugins/zTree/js/jquery.ztree.excheck.js?v=${.Config.basic.version}"></script>
    <script src="../plugins/zTree/js/jquery.ztree.exedit.js?v=${.Config.basic.version}"></script>
    <!-- <script src="/plugins/echart/echarts.min.js"></script> -->
    <script src="../plugins/echart/echarts-4.8.min.js?v=${.Config.basic.version}"></script>
    <script src="../dashboard/js/jquery.liMarquee.js?v=${.Config.basic.version}"></script>
    <script src="../plugins/jtopo/jtopo_fixbug.js"></script>
    <script src="../plugins/jquery.slimscroll.min.js"></script>
    <script src="../plugins/moment.min.js"></script>
    <script src="../js/utils.js?v=${.Config.basic.version}"></script>
    <script src="../js/func.js?v=${.Config.basic.version}"></script>
    <script>
        var lay_index=null;
        var zTree=null;
        var table=null;
        var laydate=null;
        var form=null;
        var element=null;
        //var transfer=null;
        var actions=null;
        var token = window.localStorage.getItem("token");
        var user_info=JSON.parse(window.localStorage.getItem("user_info"));
        var func_url="${.func_url}";
        var farms=null;
        var houses=null;
        var curfarm_ = null;
        var cur_farm_id =null;
        var cur_house = null;
        var request = getRequest();
        console.info(request);
        if(request){
            if(request.farmid){
                cur_farm_id = request.farmid;
            }
        }
        var cur_alarm_data=[];

        var begin = moment().add(-1, 'months').format('YYYY-MM-DD');
        var end = moment().add(0, 'months').format('YYYY-MM-DD HH:mm');

        const maskColor = "rgba(0, 0, 0, 0.2)";
        const redColor = "#FF3366";
        const greenColor = "#009900";
        const blueColor = "#009900";
        const grayColor = "#3e4144";
        const cyanColor = "#6ed0e0";
        const waterColor = "#00CCFF";
        const lightGreenColor = "#429c5e";
        const lightOrangeColor = "#f47011";
        const lightOrangeColor1 = "#eab839";
        const lightOrangeColor2 = "#ffee01";
        const co2Color = "#91c7ae";
        const gasColor = "#61a0a8";
        const titleColor = "#8f97b3";
        var chart1 =null;
        var chart2 =null;
        var chart_mode =null;
        var chart1_options = {

            legend: {
                show:true,
                x:'center',
                y:'10',
                icon: 'stack',
                itemWidth:10,
                itemHeight:10,
                textStyle: {
                    fontSize: 11,
                    color: 'rgb(0,253,255,0.6)'
                },
                data:['下料量(kg)',"下水量(L)"]
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(0, 255, 233,0)'
                            }, {
                                offset: 0.5,
                                color: 'rgba(255, 255, 255,1)',
                            }, {
                                offset: 1,
                                color: 'rgba(0, 255, 233,0)'
                            }],
                            global: false
                        }
                    },
                }
            },
            grid: {
                top: '15%',
                left: '5%',
                right: '5%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: true
                },
                splitArea: {
                    // show: true,
                    color: '#f00',
                    lineStyle: {
                        color: '#f00'
                    },
                },
                axisLabel: {
                    color: titleColor
                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                //data: ['A', 'B', 'C', 'D', 'E', 'F'],

            }],
            yAxis: [{
                type: 'value',
                min: 0,
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    }
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    margin: 20,
                    textStyle: {
                        color: titleColor,

                    },
                },
                axisTick: {
                    show: true,
                },
            },{
                type: 'value',
                min: 0,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    }
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    margin: 20,
                    textStyle: {
                        color: titleColor,

                    },
                },
                axisTick: {
                    show: true,
                },
            }],
            series: [{
                name: '下料量(kg)',
                type: 'line',
                //symbolSize: 3,
                smooth: true, //是否平滑
                showSymbol: true,
                // symbol: 'image://./static/images/guang-circle.png',
                //symbol: 'none',
                yAxisIndex: 0,

                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: lightOrangeColor
                        }, {
                            offset: 0.8,
                            color: 'rgba(255,255,255,0)'
                        }], false),
                        // shadowColor: 'rgba(255,255,255, 0.1)',
                        shadowBlur: 10,
                        opacity:0.3,
                    }
                },
                itemStyle: {
                    normal: {
                        color: lightOrangeColor,
                        lineStyle: {
                            width: 1,
                            type: 'solid' //'dotted'虚线 'solid'实线
                        },
                        borderColor: lightOrangeColor, //图形的描边颜色。支持的格式同 color
                        //borderWidth: 8 ,//描边线宽。为 0 时无描边。[ default: 0 ]
                        barBorderRadius: 0,
                        label: {
                            show: false,
                        },
                        opacity:0.5,
                    }
                },
                tooltip: {
                    show: true
                }
            }
                ,{
                    name: '下水量(L)',
                    type: 'line',
                    smooth: true, //是否平滑
                    showSymbol: true,
                    yAxisIndex: 1,
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00c7d9'
                            }, {
                                offset: 0.8,
                                color: 'rgba(255,255,255,0)'
                            }], false),
                            // shadowColor: 'rgba(255,255,255, 0.1)',
                            shadowBlur: 10,
                            opacity:0.3,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#00c7d9',
                            lineStyle: {
                                width: 1,
                                type: 'solid' //'dotted'虚线 'solid'实线
                            },
                            borderColor: '#00c7d9', //图形的描边颜色。支持的格式同 color
                            //borderWidth: 8 ,//描边线宽。为 0 时无描边。[ default: 0 ]
                            barBorderRadius: 0,
                            label: {
                                show: false,
                            },
                            opacity:0.5,
                        }
                    },
                    tooltip: {
                        show: true
                    }
                }
            ]
        };
        var chart2_options = {
            legend: {
                show:true,
                x:'center',
                y:'10',
                icon: 'stack',
                itemWidth:10,
                itemHeight:10,
                textStyle: {
                    fontSize: 11,
                    color: 'rgb(0,253,255,0.6)'
                },
                data:['下料量(kg)','下水量(L)'],
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: true,
                    data: [],
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.05)'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: titleColor
                        },
                        //alignWithLabel: true,
                        //interval: 0,
                        //rotate: '15'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    //splitNumber:3,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.05)'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color:titleColor
                        }
                    },
                }
            ],
            series: [
                {
                    name: '下料量(kg)',
                    type: 'bar',
                    //barWidth: '10px',
                    barMaxWidth:'10px',
                    //yAxisIndex: 0,
                    data: [],
                    itemStyle: {
                        normal: {
                            color: lightOrangeColor1,
                            barBorderRadius: [30, 30, 30, 30],
                            shadowColor: '#f29725',
                            shadowBlur: 4,
                        }
                    },
                },
                {
                    name: '下水量(L)',
                    type: 'bar',
                    //barWidth: '10px',
                    barMaxWidth:'10px',
                    //yAxisIndex: 1,
                    data: [],
                    itemStyle: {
                        normal: {
                            color: waterColor,
                            barBorderRadius: [30, 30, 30, 30],
                            shadowColor: blueColor,
                            shadowBlur: 4,
                        }
                    },
                }
            ]
        };
        var option_mode = {
            title: {
                text: "设备模式",
                top: "45%",
                textAlign: "center",
                left: "49%",
                textStyle: {
                    color: "#fff",
                    fontSize: 15,
                    fontWeight: "400",
                },
            },
            graphic: {
                elements: [
                    {
                        type: "image",
                        z: 3,
                        style: {
                            //image: img,
                            width: 78,
                            height: 78,
                        },
                        left: "center",
                        top: "center",
                        position: [100, 100],
                    },
                ],
            },
            tooltip: {
                show: true,
            },
            legend: {
                show:false,
                icon: "circle",
                //orient: "horizontal",
                // x: 'left',
                orient: "vertical",
                data: ["公猪", "哺乳", "妊娠", "停用"],
                left: "2%",
                bottom: "2%",
                align: "left",
                textStyle: {
                    fontSize: 10,
                    color: 'rgba(255,255,255,.7)',
                },
                itemGap: 10,
            },
            toolbox: {
                show: false,
            },
            series: [
                {
                    name: "",
                    type: "pie",
                    clockWise: false,
                    //radius: [55, 65],
                    center: ["50%", "50%"],
                    radius: ['50%', '60%'],
                    minAngle: 0,  //设置扇形的最小占比
                    hoverAnimation: false,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true, // false不展示
                                position: "outside", // 设置位置在饼状图的外面 inside为内部
                                fontSize: 11,
                                color: 'rgba(255,255,255,.7)',
                                formatter: function (params) {
                                    var percent = 0;
                                    var total = 0;
                                    for (var i = 0; i < modeData.length; i++) {
                                        total += modeData[i].num;
                                    }
                                    percent = ((params.value / total) * 100).toFixed(1);
                                    if (params.name !== "") {
                                        return (
                                            params.name +
                                            " :" +
                                            params.value+
                                            "\n" +
                                            " " +
                                            percent +
                                            "%"
                                        );
                                    } else {
                                        return "";
                                    }
                                },
                            },
                            labelLine: {
                                length: 0,
                                length2: 15,
                                show: true,
                                color: "#00ffff",
                            },
                        },
                    },
                    data: [],
                },
            ],
        };

        var vu = new Vue({
            el: '.sum-info',
            data: {
                alarmNum:'-',
                disableNum:'-',
                onlineNum:"-",
                deviceNum:"-",
                todayFeed:'-',
                todayWater:'-',
                houseNum:'-',
                pigNum:'-'
            },
            methods: {
            }
        });

        var vm = new Vue({
            el: '.my_house',
            data: {
                list:[]
            },
            methods: {
            }
        });

        token = 'Bearer ' + token;
        layui.config({
            base: '../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table','form','element','transfer'], function(){
            $ = layui.$;
            form = layui.form;
            element = layui.element;

            $.ajax({
                type: 'GET',
                url: '../Api/User/Actions',
                data: {func_url:func_url},
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (data) {
                    console.info(data)
                    actions=data.data;
                    for(var i=0;i<actions.length;i++){
                        $('.action-'+actions[i].action_id).removeClass("layui-hide");
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('加载操作信息失败');
                }
            });

            $.ajax({
                type: 'GET',
                url: '../Api/Farm/List',
                data: {},
                beforeSend: function (request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (res) {
                    if(res.code>=0){
                        console.info(res.data);
                        farms = res.data;
                        if(farms.length>0){
                            if(cur_farm_id){
                                for(var i=0;i<farms.length;i++){
                                    if(farms[i].id==cur_farm_id){
                                        cur_farm = farms[i];
                                    }
                                }
                            }else{
                                cur_farm_id = farms[0].id;
                                cur_farm = farms[0];
                            }

                            renderSelect();
                            loadAll(cur_farm_id);
                            setInterval(function () {
                                loadAll(cur_farm_id);
                            },60*1000);
                        }

                    }else{
                        layer.alert(res.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('加载信息失败');
                },
                complete: function(XMLHttpRequest, textStatus) {
                    layer.closeAll('loading');
                },
            });

            form.render('select');

            //切换
            form.on('select(farm)', function(data){
                var id=data.value;
                cur_farm_id = id;
                console.info("farmid",cur_farm_id);
                loadAll(cur_farm_id);
            });

            initCharts();
            resize();
        });

        function initCharts(){
            chart1 = echarts.init(document.getElementById('chart1'));
            chart2 = echarts.init(document.getElementById('chart2'));
            chart_mode = echarts.init(document.getElementById('chart_mode'));
        }

        function loadAll(farmid) {
            loadHouse(farmid);
            //loadDeviceData(farmid);
            loadSumMode(farmid);
            loadTodayFeed(farmid);
            loadDaySumFeed(farmid);
            loadDayAvgFeed(farmid);

            loadFeedNodeData(farmid);
            loadFarmAlarm(farmid);
        }

        function loadHouse(farmid) {
            //layer.load(1);
            $.ajax({
                type: 'GET',
                url: '../Api/House/Detail',
                data: {farmid:farmid},
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (res) {
                    if(res.code>=0){
                        houses = res.data;
                        if(res.count>0){
                            cur_house  = res.data[0];
                        }
                        console.info(houses);
                        vm.list=[];
                        for(var i=0;i<houses.length;i++){
                            var housename = res.data[i].housename;
                            var id = res.data[i].id;
                            var farmid = res.data[i].farmid;
                            var TodayFeed = res.data[i].TodayFeed;
                            var day_use_feed_auto = 0;
                            var day_use_feed_man = 0;

                            if(TodayFeed){
                                day_use_feed_auto = TodayFeed.day_use_feed_auto;
                                day_use_feed_man = TodayFeed.day_use_feed_man;
                            }
                            vm.list.push({
                                id:id,
                                farmid:farmid,
                                index:i,
                                housename:housename,
                                alarm_num:0,
                                temp:'-',
                                humi:'-',
                                total_feed:(day_use_feed_auto+day_use_feed_man).toFixed(2)
                            });
                        }

                        //加载栏舍告警
                        for(var i=0;i<houses.length;i++){
                            var id = res.data[i].id;
                            loadHouseAlarm(id);
                        }

                        vu.houseNum = vm.list.length;

                    }else{
                        layer.alert(res.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('加载信息失败');
                },
                complete: function(XMLHttpRequest, textStatus) {
                    layer.closeAll('loading');
                },

            });
        }


        /*function loadDeviceData(farmid) {
            //layer.load(1);
            $.ajax({
                type: 'GET',
                url: '../Api/Farm/DeviceData',
                data: {id:farmid},
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (res) {
                    if(res.code>=0){
                        vu.onlineNum =res.data.onlineNum;
                        vu.deviceNum =res.data.deviceNum;
                        vu.alarmNum =res.data.alarmNum;
                        vu.pigNum = res.data.pigNum;
                    }else{
                        layer.alert(res.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('加载信息失败');
                },
                complete: function(XMLHttpRequest, textStatus) {
                    layer.closeAll('loading');
                },

            });
        }*/

        function loadFeedNodeData(farmid){
            $.ajax({
                type: 'GET',
                url: '../Api/Device/Feednode/Simple',
                data: {farmid:farmid},
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (res) {
                    if(res.code>=0){
                        console.info(res.data);

                        //统计基本
                        var onlineNum = 0;
                        var deviceNum = 0;
                        var offlineNum = 0;
                        var alarmNum = 0;
                        var disableNum = 0;
                        var pigNum = 0;
                        var onlinePer = 0;
                        //离线,堵料,空转,无水料,电机故障,温度高,温度低,其他
                        var alarmNum1= 0,alarmNum2= 0,alarmNum3= 0,alarmNum4= 0,alarmNum5= 0,alarmNum6= 0,alarmNum7= 0,alarmNum8 = 0;
                        var modePigNum = {
                            "停用":0,
                            "妊娠":0,
                            "空怀":0,
                            "保育":0,
                            "育肥":0,
                            "哺乳":0,
                            "公猪":0,
                            "仔":0, //哺乳时候显示带仔数
                        };//模式下猪只个数统计

                        if(res.data){
                            var items = res.data;
                            deviceNum = items.length;
                            for(var i=0;i<items.length;i++)
                            {
                                if(items[i].online==1){
                                    onlineNum += 1;
                                    if(items[i].alarm || items.alarm_ext){
                                        alarmNum+=1;
                                        console.info(i+" 告警");
                                    }
                                }else if(items[i].online==0){
                                    console.info(i+" 离线");
                                    alarmNum+=1;
                                }else{
                                    //从未在线过，不当作离线
                                }

                                //统计大猪个数
                                if(items[i].mode){
                                    pigNum+=1;
                                    modePigNum[decodeMode(items[i].mode)]+=1;
                                    if(items[i].mode==5){
                                        //哺乳
                                        modePigNum["仔"]+=items[i].son;
                                    }
                                }else{
                                    disableNum++;
                                }

                                //统计告警
                                if(items[i].alarm){
                                    if(items[i].alarm==1){
                                        alarmNum2+=1;
                                    }else if(items[i].alarm==2){
                                        alarmNum2+=1;
                                    }else if(items[i].alarm==3){
                                        alarmNum8+=1;
                                    }
                                }

                                //统计堵料告警
                                if(items[i].alarm_ext>0){
                                    alarmNum+=1;
                                    alarmNum3 += 1;
                                }
                            }
                        }
                        console.info("modePigNum",modePigNum);
                        offlineNum = deviceNum - onlineNum;
                        alarmNum1 = offlineNum;
                        onlinePer = (onlineNum/deviceNum*100).toFixed(1);

                        vu.onlineNum =onlineNum;
                        vu.deviceNum =deviceNum;
                        vu.offlineNum = offlineNum;
                        vu.alarmNum =alarmNum;
                        vu.disableNum = disableNum;
                        vu.pigNum = pigNum;
                    }else{
                        layer.alert(res.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('加载信息失败');
                },
                complete: function(XMLHttpRequest, textStatus) {
                    layer.closeAll('loading');
                },

            });
        }

        //获取模式
        function loadSumMode(farmid) {
            $.ajax({
                type: 'GET',
                url: '../Api/Farm/SumMode',
                data: {id:farmid},
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (res) {
                    if(res.code>=0){
                        /*var color = [
                            "#00ffff",
                            "#00cfff",
                            "#006ced",
                            "#ffe000",
                            "#ffa800",
                            "#ff5b00",
                            "#ff3000",
                        ];*/
                        var color = [
                            "#FFB800", //停用
                            "#006ced", //妊娠
                            "#6f9aa4", //空怀
                            "#0f6d47", //保育
                            "#54e08c", //育肥
                            "#4c4da0", //哺乳
                            "#2a479d", //公猪
                        ];
                        var data = [];
                        //只显示 "公猪", "哺乳", "妊娠", "停用"
                        //"6", "5", "1", "0"
                        modeData = [];
                        var typeData =[];
                        if(res.data){
                            /*modeData = $.grep(res.data,function (item) {
                                return item.mode==6 || item.mode==5 || item.mode==1 ||item.mode==0;
                            });*/
                            modeData = res.data;
                        }

                        console.info("modeData",modeData)
                        for (var i = 0; i < modeData.length; i++) {
                            if(modeData[i].num==0){
                                modeData[i].num = null;
                                //continue;
                            }
                            var name = "";
                            if(modeData[i].device_type=="DMXFGW"){
                                name = decodeModeNew(modeData[i].mode)
                            }else{
                                name = decodeMode(modeData[i].mode)
                            }
                            typeData.push(name);
                            
                            data.push(
                                {
                                    value: modeData[i].num,
                                    name: name,
                                    itemStyle: {
                                        normal: {
                                            borderWidth: 2,
                                            shadowBlur: 10,
                                            borderColor: color[i],
                                            shadowColor: color[i],
                                        },
                                    },
                                }
                            );
                        }

                        option_mode.color= color;
                        console.info(data)
                        option_mode.series[0].data= data;
                        option_mode.legend.data = typeData;

                        setTimeout(function(){
                            chart_mode.setOption(option_mode);
                        },100);
                    }else{
                        layer.alert(res.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('加载信息失败');
                },
                complete: function(XMLHttpRequest, textStatus) {
                    layer.closeAll('loading');
                },

            });
        }

        function loadTodayFeed(farmid) {
            //layer.load(1);
            $.ajax({
                type: 'GET',
                url: '../Api/Farm/TodayFeed',
                data: {id:farmid},
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (res) {
                    if(res.code>=0){
                        var feed = parseFloat(res.data.day_use_feed_auto)+parseFloat(res.data.day_use_feed_man);
                        var water = parseFloat(res.data.day_use_water_auto)+parseFloat(res.data.day_use_water_man);
                        vu.todayFeed =feed.toFixed(2);
                        vu.todayWater =water.toFixed(2);
                    }else{
                        layer.alert(res.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('加载信息失败');
                },
                complete: function(XMLHttpRequest, textStatus) {
                    layer.closeAll('loading');
                },

            });
        }

        function loadDaySumFeed(farmid) {
            //layer.load(1);
            $.ajax({
                type: 'GET',
                url: '../Api/Farm/DaySumFeed',
                data: {id:farmid,begin:begin,end:end},
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (res) {
                    if(res.code>=0){
                        var day_arr =[];
                        var val_arr =[];
                        var val1_arr =[];

                        //console.info(res.data)
                        for(var i=0;i<res.data.length;i++){
                            var his = res.data[i];
                            var feed = parseFloat(his.day_use_feed_auto)+parseFloat(his.day_use_feed_man);
                            var water = parseFloat(his.day_use_water_auto)+parseFloat(his.day_use_water_man);
                            val_arr.push(feed.toFixed(2));
                            val1_arr.push(water.toFixed(2));
                            day_arr.push(moment(his.his_date).format("MM/DD") );
                        }


                        chart2_options.series[0].data= val_arr;
                        chart2_options.series[1].data= val1_arr;
                        chart2_options.xAxis[0].data = day_arr;

                        setTimeout(function(){
                            chart2.setOption(chart2_options);
                        },200);

                    }else{
                        layer.alert(res.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('加载信息失败');
                },
                complete: function(XMLHttpRequest, textStatus) {
                    layer.closeAll('loading');
                },

            });
        }

        function loadDayAvgFeed(farmid) {
            //layer.load(1);
            $.ajax({
                type: 'GET',
                url: '../Api/Farm/DayAvgFeed',
                data: {id:farmid,begin:begin,end:end},
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (res) {
                    if(res.code>=0){

                        var day_arr =[];
                        var val_arr =[];
                        var val1_arr =[];

                        //console.info(res.data)
                        for(var i=0;i<res.data.length;i++){
                            var his = res.data[i];
                            var feed = parseFloat(his.day_use_feed_auto)+parseFloat(his.day_use_feed_man);
                            var water = parseFloat(his.day_use_water_auto)+parseFloat(his.day_use_water_man);
                            val_arr.push(feed.toFixed(2));
                            val1_arr.push(water.toFixed(2));
                            day_arr.push(moment(his.his_date).format("MM/DD") );
                        }


                        chart1_options.series[0].data= val_arr;
                        chart1_options.series[1].data= val1_arr;
                        chart1_options.xAxis[0].data = day_arr;

                        setTimeout(function(){
                            chart1.setOption(chart1_options);
                        },200);
                    }else{
                        layer.alert(res.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('加载信息失败');
                },
                complete: function(XMLHttpRequest, textStatus) {
                    layer.closeAll('loading');
                },

            });
        }

        function loadFarmAlarm(farmid){
            $.ajax({
                type: 'GET',
                url: '../Api/Alarm',
                data: {farmid:farmid,status:1},
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (res) {
                    if(res.code>=0){
                        console.info(res.data);
                        cur_alarm_data = res.data;
                        console.info("farm alarm data:",cur_alarm_data);
                        //<li><span class="">测试</span><span>堵料告警</span><span>2022-09-09 22:21:21</span></li>
                        
                        $(".smjl").empty();
                        var html = "";
                        if(res.data.length>0){
                            for(var i=0;i<res.data.length;i++){
                                var item = res.data[i];
                                if(item.device_type=="HZFGW_NODE"||item.device_type=="NMSWQGW_NODE"){
                                    html+="<li><span class=''>"+item.housename+"</span><span>栏位"+item.remark+" "+item.alarm_content+"</span><span>"+item.add_time+"</span></li>";
                                }else if(item.device_type=="HZFGW" || item.device_type=="DMXFGW"){
                                    html+="<li><span class=''>"+item.housename+"</span><span>"+item.alarm_content+"</span><span>"+item.add_time+"</span></li>";
                                }
                                
                            }
                        }
                        $(".smjl").html(html);

                        $('.scrollDiv').liMarquee('destroy');
                        $('.scrollDiv').liMarquee({
                            direction: 'up',//身上滚动
                            runshort: false,/*内容不足时不滚动*/
                            scrollamount: 20,//速度
                            circular:true
                        });

                    }else{
                        layer.alert(res.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('加载信息失败');
                },
                complete: function(XMLHttpRequest, textStatus) {
                    layer.closeAll('loading');
                },

            });
            
        
        }

        function loadHouseAlarm(houseid){
            //栏舍告警信息
            $.ajax({
                type: 'GET',
                url: '../Api/Alarm',
                data: {houseid:houseid,status:1},
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (res) {
                    if(res.code>=0){
                        //console.info(res.data);
                        for(var i=0;i<vm.list.length;i++){
                            if(vm.list[i].id==houseid){
                                vm.list[i].alarm_num = res.data.length;
                            }
                        }
                    }
                }
            });
        }


        function onClickHouse(item){
            console.info(JSON.stringify(item));
            window.location.href="../House/Status?id="+item.id+"&farmid="+item.farmid;
            //layui.index.openTabsPage("/House/Status?id="+item.id+"&farmid="+item.farmid);
        }

        function renderSelect(){
            //栏舍下拉
            var html="";
            for(var i=0;i<farms.length;i++){
                var selectd="";
                if(farms[i].id==cur_farm_id){
                    selectd=" selected ";
                }
                html+="<option "+selectd+" value=\""+farms[i].id+"\">"+farms[i].farmname+"</option>";
            }

            $("select[name='farm']").html(html);
            form.render('select');
        }

        window.onresize = function () {
            resize();
        };
        function resize() {
            //字体变化
            const width = document.body.clientWidth;
            const ratio = width / 1920;
            const val = Math.round(16 * ratio);//浏览器默认16px;
            document.documentElement.style.fontSize = val + 'px';

            var h = $(".house-panel").height();

            $(".panel-content").slimScroll({
                height: h-25,
                size: '5px', //组件宽度
                color: '#eee', //滚动条颜色
                position: 'right', //组件位置：left/right
                distance: '0px', //组件与侧边之间的距离
                start: 'top', //默认滚动位置：top/bottom
                opacity: .4, //滚动条透明度
                alwaysVisible: true, //是否 始终显示组件
                disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
                railVisible: true, //是否 显示轨道
                railColor: '#333', //轨道颜色
                railOpacity: .2, //轨道透明度
                railDraggable: true, //是否 滚动条可拖动
                railClass: 'slimScrollRail', //轨道div类名
                barClass: 'slimScrollBar', //滚动条div类名
                wrapperClass: 'slimScrollDiv', //外包div类名
                allowPageScroll: true, //是否 使用滚轮到达顶端/底端时，滚动窗口
                wheelStep: 20, //滚轮滚动量
                touchScrollStep: 200, //滚动量当用户使用手势
                borderRadius: '7px', //滚动条圆角
                railBorderRadius: '7px' //轨道圆角
            });

            if (chart1) {
                chart1.resize();
            }
            if (chart2) {
                chart2.resize();
            }
            if (chart_mode) {
                chart_mode.resize();
            }
        }

        // 根据不同的屏幕宽度换算字体大小
        function transformFontSize(fontsize) {
            // 获取屏幕宽度
            //const width = window.screen.width
            const width =  document.body.clientWidth ;
            //const ratio = width / 1920
            const ratio = width / 1920
            console.info(width,ratio);
            // 取下整
            return Math.round(fontsize * ratio)
        }


    </script>
<script src="../js/check_screen.js?v=${.Config.basic.version}"></script>

</body>
</html>